<template>
	<view>
		<wode-kehu :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></wode-kehu>

		<view class="uni-tab-bar">
			<swiper class="swiper-box heighly" :style="{ height: highly + 'px' }" :current="tabIndex"
				@change="tabChange">
				<swiper-item v-for="(item, index) in tabBars" :key="index">
					<scroll-view scroll-y="true" class="list" @scrolltolower="reachBottom">
						<view class="m-mg-lr">
							<!-- 已推荐客户 -->
							<view class="m-card-bg u-flex u-flex-between u-flex-items-center u-p-30">
								<view class="u-flex u-flex-items-center">
									<u-image width="20" height="20" :src="oss + '/mine/xb.png'"></u-image>
									<text
										class="u-font-28 u-m-l-20 m-c-1a">{{ index === 0 ? '已推荐客户' : index === 1 ? '已到访客户' : index === 2 ? '已认购客户' : '已确认客户' }}</text>
								</view>
								<view class="ndj-or u-flex u-flex-items-center">
									<view class="u-font-40 m-font-b m-c-o">{{ kehu.count }}</view>
									<text class="u-font-20 m-c-9e">位</text>
								</view>
							</view>
							<!-- 客户 -->
							<view v-if="kehu.list" class="m-card-bg u-m-t-30" v-for="(items, indexs) in kehu.list"
								:key="indexs">
								<view class="m-jb-bg u-flex u-flex-between u-flex-items-center u-p-30 m-c-w"
									v-if="(items.pid == zhuce.id && items.ta.name) || items.pid != zhuce.id">
									<view class="u-flex u-flex-items-center">
										<u-image width="20" height="20" :src="oss + '/mine/rt.png'"></u-image>
										<text class="u-font-32 m-font-b u-m-l-20">
											{{ items.pid == zhuce.id ? items.ta.name || items.ta.nickname : items.tuijianren.name || items.tuijianren.nickname }}
										</text>
									</view>
									<view class="u-font-40 m-font-b">
										{{ items.pid == zhuce.id ? items.ta.mobile : items.tuijianren.mobile }}
									</view>
								</view>
								<u-cell-group>
									<u-cell size="large">
										<view slot="title" class="u-slot-title u-font-26 u-flex u-flex-items-center">
											<text class="u-cell-text m-c-9e">经纪人姓名</text>
											<text class="u-font-28 m-c-1a">{{ items.status == '1' ? '' : '' }}</text>
											<text class="m-c-9e u-m-l-20 u-flex-self-end">{{ items.p_mobile }}</text>
										</view>
									</u-cell>
									<u-cell size="large">
										<view slot="title" class="u-slot-title u-font-26 u-flex u-flex-items-center">
											<text class="u-cell-text m-c-9e">客户姓名</text>
											<text class="u-font-28 m-c-1a">{{ items.name }}</text>
										</view>
										<u-icon slot="value" size="14" :name="oss + '/mine/xc.png'"></u-icon>
									</u-cell>
									<u-cell size="large">
										<view slot="title" class="u-slot-title u-font-26 u-flex u-flex-items-center">
											<text class="u-cell-text m-c-9e">客户联系方式</text>
											<text class="u-font-28 m-c-1a">{{ items.mobile }}</text>
										</view>
										<u-icon slot="value" size="14" :name="oss + '/mine/xt.png'"></u-icon>
									</u-cell>
									<u-cell size="large">
										<view slot="title" class="u-slot-title u-font-26 u-flex u-flex-items-center">
											<text class="u-cell-text m-c-9e">购买楼盘</text>
											<text class="u-font-28 m-c-1a">{{ items.properties_name }}</text>
										</view>
									</u-cell>
									<u-cell size="large">
										<text slot="title" class="u-slot-title m-c-9e">是否本人</text>
										<!-- <u-switch slot="value" :activeValue="1" :inactiveValue="0"
											v-model="items.is_benren" activeColor="#DBB07B" disabled></u-switch> -->
										<switch slot="value" color="#DBB07B" :checked="items.is_benren" />
									</u-cell>
									<u-cell size="large">
										<view slot="title" class="u-slot-title u-font-26 u-flex u-flex-items-center">
											<text class="u-cell-text m-c-9e">到访人数</text>
											<text class="u-font-28 m-c-1a">{{ items.number }}人</text>
										</view>
										<view slot="value" class="u-font-28 m-c-1a">
											{{items.visitdatetime}}
										</view>
									</u-cell>
									<u-cell size="large">
										<view slot="title" class="u-slot-title u-font-26 u-flex u-flex-items-center">
											<text class="u-cell-text m-c-9e">接待管家</text>
											<text class="u-font-28 m-c-1a" v-if="items.p_name">{{ items.p_name }}</text>
										</view>
									</u-cell>

									<!-- <view slot="value" class="u-slot-value u-font-26">
										<text class="u-cell-text m-c-9">{{ items.hao }}</text>
										<u-icon size="20" :name="items.icon"></u-icon>
										<u-switch v-if="indexs === 3" v-model="value" activeColor="#DBB07B" @change="change"></u-switch>
										<text v-if="index === 1" class="m-c-9 m-bg-9">{{ items.rq }}</text>
									</view> -->
								</u-cell-group>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0, // 选中的
				tabBars: [{
						name: '已推荐',
						id: 'guanzhu'
					},
					{
						name: '已到访',
						id: 'tuijian'
					},
					{
						name: '已认购',
						id: 'tiyu'
					},
					{
						name: '已确认',
						id: 'redian'
					}
				],
				kehu: {},
				value: '',
				userInfo: '',
				zhuce: {}
			};
		},
		async onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.zhuce = JSON.parse(userInfo);
			}
			await this.getList();
		},
		methods: {
			async tabtap(index) {
				this.tabIndex = index;
				this.params.p = 1;
				this.params.status = this.tabIndex;
				await this.getList();
			},
			async getList(add) {
				let res = await this.require('getMycustomer', {
					...this.params,
					pnum: this.pnum,
					status: this.tabIndex
				});
				if (res) {
					if (add === 'add') {
						this.kehu.list = this.kehu.list.concat(res);
					} else {
						this.kehu = res;
					}
					if (this.kehu.list) {
						for (var i = 0; i < this.kehu.list.length; i++) {
							// this.kehu.list[i].is_benren = this.kehu.list[i].is_benren==1;
							let tuijianren = await this.require('getiduser', {
								id: this.kehu.list[i].pid
							});
							if (tuijianren) {
								this.kehu.list[i].tuijianren = tuijianren;
							}
							let ta = await this.require('getiduser', {
								mobile: this.kehu.list[i].mobile
							});
							if (ta) {
								this.kehu.list[i].ta = ta;
							}
						}
						console.log(this.kehu.list);
						this.listStatus = res.list.length === this.pnum ? 'loadmore' : 'nomore';
					}
				} else {
					this.kehu = {};
					this.listStatus = 'nomore';
				}
			},
			//滑动切换导航
			async tabChange(e) {
				this.tabtap(e.detail.current);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		height: calc(100vh - (100rpx));
	}

	.m-card-bg {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.m-jb-bg {
		background: -webkit-linear-gradient(left, #dbb07b, #f2f2f2);
	}

	.m-bg-9 {
		background: rgba(145, 145, 145, 0.4);
	}

	.u-cell-text {
		width: 200rpx;
	}
</style>
